{% extends 'base.html' %}

{% block title %}
  文章详情页
{% endblock %}


{% block head %}
  <!-- 添加Prism.js代码高亮 -->
  <link rel="stylesheet" href="{% static 'css/detail.css' %}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
{% endblock %}



{% block main %}

  <main class="article-detail">
    <!-- 文章头部信息 -->
    <div class="article-header">
      <h1>{{ blog.title }}</h1>
      <span class="author-name article-meta">{{ blog.author }}</span>
      <div class="article-meta">
        <div class="author-info">
          <div>
            <div class="meta-details">
              <span><i class="far fa-calendar"></i>{{ blog.pub_time|date:'Y年m月d日 H时i分' }}</span>
              <span><i class="far fa-comment"></i> {{ blog.comments.all|length }}条评论</span>
            </div>
          </div>
        </div>

        <div class="article-tags">
          <span class="tag">{{ blog.category.name }}</span>
        </div>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="article-content">
      <!-- 文章主体内容 -->
      <div class="content-body">
        {{ blog.content|safe }}
      </div>
    </div>

    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论 <span>{{ blog.comments.all|length }}条</span></h3>

      <div class="comment-form">
        <div class="comment-avatar">
          <i class="fas fa-user"></i>
        </div>
        <form action="{% url 'blog:pub_comment' %}" method="POST">
          {% csrf_token %}
          <input type="hidden" name="blog_id" value="{{ blog.id }}">
          <div class="form-group">
            <textarea name="content" placeholder="分享你的想法..." style="width: 720px;" required></textarea>
            <div class="form-actions">
              <button class="btn btn-primary">发布评论</button>
            </div>
          </div>
        </form>
      </div>

      <div class="comments-list">
        {% for comment in blog.comments.all %}
          <div class="comment">
            <div class="comment-avatar">
              <i class="fas fa-user"></i>
            </div>

            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author.username }}</span>
                <span class="comment-date">{{ comment.pub_time|date:'Y年m月d日 H时i分' }}</span>
              </div>
              {{ comment.content }}
            </div>
            <br>
          </div>
        {% endfor %}
      </div>
    </div>
  </main>

{% endblock %}